<template>
  <div class="lin_designer_kubernetes_of_ack">
    <div class="lin_designer_kubernetes_of_ack_info">
      <div class="lin_designer_kubernetes_of_ack_info_img">
        <div>
          <div class="lin_designer_kubernetes_of_ack_back">
            <NuxtLink to="/designer">

              <div><el-icon size="15" style="top: 4px; margin-right: 10px" class="lin_right_icon"><Back /></el-icon>project</div>
            </NuxtLink>
          </div>
          <div class="lin_designer_kubernetes_of_ack_info_title">
            <div>
              <h1>OBSBOT official website</h1>
              <h1>based on ack deployment</h1>
            </div>
          </div>
          <div>
            <img src="/public/images/obsbot/obsbot.png" @click.stop="imageClick">
          </div>
        </div>
      </div>
      <div class="lin_designer_kubernetes_of_ack_back_content">
        <div class="lin_designer_kubernetes_of_ack_info_overview">
          <div>
            <span>Deployment time: May 2024 </span>
            <a href="https://www.obsbot.com" class="lin_designer_kubernetes_of_ack_back_content_view" target="_blank">
              Let's view
              <el-icon size="15" class="lin_designer_kubernetes_of_ack_back_content_view_icon" ><Right /></el-icon>
            </a>
          </div>
          <div>
            <h3>Overview</h3>
            <div>
              <span>Use K8S for front-end and back-end deployment, use ack for UI operations, and develop flexible and highly customizable business systems.</span>
            </div>
          </div>
        </div>

        <div class="lin_designer_kubernetes_of_ack_back_content_features">
          <h3>Key Features</h3>
          <ul>
            <li>
              <strong>Hosting services</strong>
              :
              <span>Simplified management: ACK is a fully managed Kubernetes service that eliminates the need for users to manage the underlying infrastructure of Kubernetes clusters, reducing </span>
            </li>
            <li>
              <strong>operational complexity</strong>
              :
              <span>Automated upgrade: Alibaba Cloud will regularly provide updates and security patches for Kubernetes versions, making it easy for users to upgrade.</span>
            </li>
            <li>
              <strong>Elastic expansion and contraction</strong>
              :
              <span>Supports automatic expansion and reduction of clusters, and can automatically adjust the number of nodes according to changes in load.</span>
            </li>
            <li>
              <strong>Integrate cloud services</strong>
              :
              <span>ACK can seamlessly integrate with other Alibaba Cloud services such as RDS, OSS, SLB, etc., making it easy to build cloud native applications.</span>
              <span>ACK can seamlessly integrate with other Alibaba Cloud services such as RDS, OSS, SLB, etc., making it easy to build cloud native applications.</span>
            </li>
          </ul>
        </div>
        <div class="lin_designer_kubernetes_of_ack_back_content_features">
          <h3 style="padding: 30px 0">Technologies Used</h3>
          <ul>
            <li>
              <strong>Kubernetes</strong>
              :
              <span>ACK is based on the open-source Kubernetes platform and provides the ability to orchestrate, schedule, scale, and manage containers. Kubernetes is currently the most popular container management system, supporting multiple container runtime and service management functions.</span>
            </li>
            <li>
              <strong>Alibaba Cloud Cloud Infrastructure</strong>
              :
              <span>As the foundation of computing resources, nodes in ACK clusters typically run on ECS, providing flexible computing capabilities.
Network services: Alibaba Cloud's Virtual Private Cloud (VPC) and Load Balancing Service (SLB) provide secure and reliable network connectivity and traffic management for ACKs.</span>
            </li>
            <li>
              <strong>Storage System</strong>
              :
              <span>Alibaba Cloud Object Storage (OSS)</span>
              <span>Alibaba Cloud File Storage (NAS)</span>
            </li>
            <li>
              <strong>Monitoring and Logging</strong>
              :
              <span>Prometheus and Grafana</span>
              <span>integrates Elasticsearch, Logstash, and Kibana for log collection, storage, and visualization analysis.</span>
            </li>
          </ul>
        </div>
        <div class="lin_designer_kubernetes_of_ack_back_content_features">

          <div class="lin_designer_kubernetes_of_ack_download">
            <h3>Architecture scheme</h3>
            <Download/>
          </div>
        </div>
        <div  class="outcome">
          <h3 style="padding: 30px 0">Outcome</h3>
          <div style="width: 500px; font-size: 13px;">
            <p>
              This design system is now widely used in multiple projects, shortening the development cycle, reducing development inconsistencies, and improving collaboration between testing and development teams. It has become the foundation of our official website architecture, while ensuring a cohesive user experience.
            </p>
          </div>
        </div>
      </div>
      <Footer/>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Back, Right} from '@element-plus/icons-vue';
import { v3ImgPreviewFn } from 'v3-img-preview'
import Download from "~/ components/button/Download.vue";
import Footer from "~/ components/Footer.vue";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { gsap } from "gsap";
import GradientBackground from "~/ components/background/GradientBackground.vue";
gsap.registerPlugin(ScrollTrigger);

const imageClick = async(e: MouseEvent) => {
// 导出方法调用
  v3ImgPreviewFn(
      '/images/obsbot/obsbot.png'
  )
}

const project_gsap = async () => {
  const element = document.querySelector('.lin_designer_kubernetes_of_ack_info_img')
  gsap.fromTo(element, {
    opacity: 0,
    y: 50,
    duration: 0.3
  }, {
    opacity:1,
    y: 0,
    duration: 1,
    ease: "power2.inOut"
  })
}

const overview_gsap = async () => {
  const elements = document.querySelectorAll('.lin_designer_kubernetes_of_ack_back_content_features')
  elements.forEach((element) => {
    gsap.fromTo(element, {
          y: 100,
          duration: 0.5,
          opacity: 0,
        },
        {
          y: 0,
          duration: 1,
          opacity: 1,
          scrollTrigger: {
            trigger: element,
            start: "top 80%",
            end: "top 40%",
            scrub: 1,
            toggleActions: "restart reverse none none",
            // markers: true,
          },
        })
  })
  gsap.fromTo('.outcome',
      {
        y: 50,
          duration: 0.3,
          opacity: 0,
      },
      {
        y: 0,
        duration: 1,
        opacity: 1,
        scrollTrigger: {
          trigger: '.lin_designer_kubernetes_of_ack_download',
          start: "top 90%",
          end: "top 70%",
          scrub: 1,
          toggleActions: "restart reverse none none",
          // markers: true,
        }
      })
}


onMounted(async () => {
  await project_gsap()
  await overview_gsap()
})

</script>


<style scoped lang="scss">

.lin_designer_kubernetes_of_ack {
  position: relative;
  width: 100%; /* 宽度自适应 */
  max-width: 900px; /* 最大宽度限制 */
  margin: auto; /* 居中 */
  overflow: hidden;
  transition: all 0.5s ease-in-out;
}


.lin_designer_kubernetes_of_ack_info {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}



.lin_designer_kubernetes_of_ack_back div:hover {
  opacity: 0.5;
  cursor: pointer;
}

.lin_designer_kubernetes_of_ack_info_title {
  padding: 40px 0;
}


.lin_designer_kubernetes_of_ack_info_img {
  opacity: 0;
  margin-top: 100px;
}

.lin_designer_kubernetes_of_ack_info img {
  max-width: 100%; /* 最大宽度为容器宽度 */
  height: auto; /* 高度自适应，保持比例 */
  cursor: pointer;
  transition: opacity 0.5s ease;
  border-radius: 15px;
}


.lin_designer_kubernetes_of_ack_back_content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 30px 100px;
}

.lin_designer_kubernetes_of_ack_info_overview div {
  padding: 15px 0;
}

.lin_designer_kubernetes_of_ack_back_content_view {
  font-size: 12px;
  padding: 0 10px;
}

.lin_designer_kubernetes_of_ack_back_content_view_icon {
  opacity: 0;
  transform: translateX(-10px);
  animation: moveIcon 1s infinite;
  top: 2px;
  margin-right: 10px;
}

.lin_designer_kubernetes_of_ack_back_content_view:hover {
  .lin_designer_kubernetes_of_ack_back_content_view_icon {
    opacity: 1;
    transform: translateX(10px);
    transition: all 0.3s ease;
  }
  color: gray;
}

.lin_designer_kubernetes_of_ack_back_content span {
  font-size: 12px;
  opacity: 0.7;
  padding: 20px 0;
  font-family: 'Microsoft JhengHei', sans-serif;
}
.lin_designer_kubernetes_of_ack_back_content_features h3 {
  padding: 30px 0;
}
.lin_designer_kubernetes_of_ack_back_content_features li {
    position: relative;
    padding: 10px;
    width: 500px;
}
.lin_designer_kubernetes_of_ack_back_content_features ul li::marker {
  content: '★';
  position: absolute;
  left: 0;
  color: var(--scheme-moss-700);
  font-size: 10px;
}

.lin_designer_kubernetes_of_ack_download h3 {
  padding: 30px 0;
}

@media screen and (max-width: 890px) {
  .lin_designer_kubernetes_of_ack_info_title {
    font-size: 13px;
    transition: all 0.5s ease-in-out;
  }
}

@media screen and (max-width: 580px) {
  .lin_designer_kubernetes_of_ack_info_overview {
    font-size: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.5s ease-in-out;
  }
  .lin_designer_kubernetes_of_ack_info_overview div:last-child {
    width: 400px;
    transition: all 0.5s ease-in-out;
  }

  .lin_designer_kubernetes_of_ack_back_content_features li {
    width: 400px;
    font-size: 10px;
    transition: all 0.5s ease-in-out;
  }
  .lin_designer_kubernetes_of_ack_back_content_features h3 {
    font-size: 15px;
    transition: all 0.5s ease-in-out;
  }
}

@media screen and (max-width: 520px) {

  .lin_designer_kubernetes_of_ack_back_content_features li {
    width: 350px;
    margin-left: 30px;
    font-size: 10px;
    transition: all 0.5s ease-in-out;
  }
  .lin_designer_kubernetes_of_ack_back_content_features h3,
  .outcome h3{
    text-align: center;
  }
  .outcome p {
    width: 400px;
    margin-left: 50px;
  }
}

@media screen and (max-width: 460px) {
  .lin_designer_kubernetes_of_ack_back_content_features li {
    width: 300px;
    margin-left: 60px;
  }
}

@media screen and (max-width: 420px) {
  .lin_designer_kubernetes_of_ack_info_overview div:last-child {
    text-align: center;
    width: 300px;
    transition: all 0.5s ease-in-out;
  }
  .lin_designer_kubernetes_of_ack_info_title {
    font-size: 10px;
    transition: all 0.5s ease-in-out;

  }

  .outcome p {
    width: 350px;
    margin-left: 80px;
  }
}


@media screen and (max-width: 400px) {
  .lin_designer_kubernetes_of_ack_info_title {
    font-size: 10px;
    transition: all 0.5s ease-in-out;
  }
}

@media screen and (max-width: 380px) {
  .lin_designer_kubernetes_of_ack_back_content_features li {
    width: 250px;
    margin-left: 90px;
  }

  .outcome p {
    width: 300px;
    margin-left: 110px;
  }
}

@media screen and (max-width: 320px) {
  .lin_designer_kubernetes_of_ack_info_overview div:last-child {
    width: 250px;
  }
  .lin_designer_kubernetes_of_ack_info_overview span,
  .lin_designer_kubernetes_of_ack_info_overview a{
    font-size: 10px;
    transition: all 0.5s ease-in-out;
  }
  .lin_designer_kubernetes_of_ack_info_title {
    font-size: 7px;
    transition: all 0.5s ease-in-out;
  }

  .lin_designer_kubernetes_of_ack_back_content_features li {
    width: 200px;
    margin-left: 110px;
  }

  .outcome p {
    width: 250px;
    margin-left: 140px;
  }
}

@media screen and (max-width: 270px) {
  .lin_designer_kubernetes_of_ack_info_overview div {
   width: 150px;
    text-align: center;
  }
  .lin_designer_kubernetes_of_ack_back_content_view {
    margin-left: 30px;
  }
  .lin_designer_kubernetes_of_ack_info_overview div:last-child {
    width: 150px;
    text-align: center;
  }
  .lin_designer_kubernetes_of_ack_info_overview span {
    font-size: 8px;
  }
}

@media screen and (max-width: 240px) {
  .lin_designer_kubernetes_of_ack_info_title {
    font-size: 5px;
    transition: all 0.5s ease-in-out;
  }
  .lin_designer_kubernetes_of_ack_back div,
  .lin_designer_kubernetes_of_ack_info_title{
    display: flex;
    justify-self: center;
    align-items: center;
  }
  .lin_designer_kubernetes_of_ack_back_content_features li {
    width: 130px;
    margin-left: 150px;
  }
  .lin_designer_kubernetes_of_ack_download h3 {
    font-size: 12px;
    transition: all 0.5s ease-in-out;
  }
  .outcome p {
    width: 150px;
    margin-left: 190px;
    transition: all 0.5s ease-in-out;
  }
}

</style>